<template>
	<view class="tabbarpage-container">
		<!--胶囊上方-->
		<div :style="{'padding-top': statusBarHeight}">
			
		</div>
		<!--胶囊-->
		<div class="head-container" :style="{'height': capsuleHeight}">
			<wd-icon @click="jumpBack" color="#fff" name="thin-arrow-left" size="18px"></wd-icon>
			<div>图片裁剪</div>
			<div style="width: 18px;"></div>
		</div>
		<!--主体-->
		<div class="tabbarpage-body" >
			<!--裁剪组件-->
			<div class="cut-container">
				 <bt-cropper autoZoom="false" ref="cropper" :imageSrc="photo"></bt-cropper>
			</div>
			<!--确定按钮-->
			<div class="btn-container">
				<div class="scale-container">
					<wd-icon name="refresh" color="#fff" size="22px"></wd-icon>
				</div>
				<wd-button @click="ocrBtn">确定</wd-button>
				<div>
					<wd-icon name="refresh" color="#fff" size="22px"></wd-icon>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	// 阅读 选择 作文 翻译
	import {tmpOCRResult1, tmpOCRResult2, tmpOCRResult3, tmpOCRResult4} from '@/js/ques.js'
	import { handleOcr } from '@/js/ocrResultHandler.js';
	export default {
		data() {
			return {
				photo:''
			}
		},
		onLoad(options) {
			this.photo = decodeURIComponent(options.photo);
		},
		methods: {
			ocrBtn(){
				//获取文件
				this.$refs.cropper.crop().then((res)=>{
				    this.ocr(res)
				})
			},
			ocr(photoPath){
				uni.showLoading({
				    title: '分析中...'
				});
				//ocr识别 TODO 取消注释
				const that = this
				if(currentOCR.backToNewQues){
					//OCR识别题目后跳转到新建错题
					//模拟阅读识别结果
					
					// 跳转题型
					setTimeout(()=>{
						that.ocrOkJump(handleOcr(tmpOCRResult1));
					},3200)
					/* uni.uploadFile({
					        url: globalProps.baseApi + 'photo/uploadForSearch',
					        filePath: photoPath,
					        name: 'file', // 后端接收文件的字段名
					        success: (res) => {
								console.log('OCR搜题返回res'+res)
								uni.hideLoading();
								const ocrResult = JSON.parse(res.data)
								const returnOcrResult = handleOcr(ocrResult)
								that.ocrOkJump(returnOcrResult);
					        },
					        fail: (err) => {
							  uni.hideLoading();
							  uni.showToast({
							      title: 'OCR识别失败',
							      icon: 'error'
							  });
					        }
					}); */
				}else{
					//OCR通用识别后跳回去，三种模式，通用/作文题目/阅读
					//通用
					uni.uploadFile({
					        url: globalProps.baseApi + 'photo/uploadForQuestion?type='+currentOCR.mode,
					        filePath: photoPath,
					        name: 'file',
					        success: (res) => {
								uni.hideLoading();
								that.ocrOkJump(res.data)
					        },
					        fail: (err) => {
								console.log(err)
							  uni.hideLoading();
							  uni.showToast({
							      title: 'OCR识别失败',
							      icon: 'error'
							  });
					        }
					});
				}
			},
			
			
			//OCR识别后跳转新建错题本页面
			ocrOkJump(ocrResult){
				if(currentOCR.backToNewQues){
					currentOCR.backToNewQues = false
					//跳转到阅读页面
					if(ocrResult[0].category === "yuedu" || ocrResult[0].category === 'xuanze'){
						uni.redirectTo({
							url: '/pages/newques/SelectPassageQuesPage/SelectPassageQuesPage?jsonData=' + encodeURIComponent(JSON.stringify(ocrResult))
						})
					}else if(ocrResult[0].category === "zuowen" || ocrResult[0].category === "fanyi"){
						uni.redirectTo({
							url: '/pages/newques/SelectQuesPage/SelectQuesPage?jsonData=' + encodeURIComponent(JSON.stringify(ocrResult))
						})
					}
					
				}else{
					uni.$emit('acceptOcrCommon', ocrResult)
					uni.navigateBack({delta: 2})
				}
			}
			
		}
	}
</script>

<script setup>
	import {currentOCR} from '@/js/ques.js'
	import TabbarCom from '@/components/TabbarCom.vue'
	import { ref } from 'vue';
	import { globalProps } from '@/js/global.js'
	
	const statusBarHeight = ref(globalProps.statusBarHeight)
	const capsuleHeight = ref(globalProps.capsuleHeight)
	const jumpBack = ()=>{
		uni.navigateBack()
	}
</script>

<style>
	@import "@/css/global.css";
	@import "@/css/animation.css";
	.head-container{
		display: flex;
		align-items: center;
		margin: 0 16px;
		justify-content: space-between;
		color: #fff;
		width: calc(100% - 32px);
		letter-spacing: 1px;
	}
	.btn-container{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 12px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 14vw;
	}
	.cut-container{
		position: absolute;
		left: 0;
		right: 0;
		top: 12px;
		bottom: 80px;
	}
	.scale-container{
		transform: scaleX(-1);
	}
</style>
